import React from 'react';
import { ArrowRightIcon, StarIcon } from 'lucide-react';
export const EssentialsList = () => {
  const essentials = [{
    id: 1,
    title: 'Car Seat',
    description: 'Safety-certified seats for every age and stage',
    image: 'https://images.unsplash.com/photo-1591088398332-8a7791972843?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    rating: 4.9
  }, {
    id: 2,
    title: 'Baby Monitor',
    description: 'Keep an eye on your little one from anywhere',
    image: 'https://images.unsplash.com/photo-1595131838595-3154b9f4450f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    rating: 4.7
  }, {
    id: 3,
    title: 'Stroller',
    description: 'Comfortable, durable strollers for every lifestyle',
    image: 'https://images.unsplash.com/photo-1584705438463-46e1a38a35c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    rating: 4.8
  }, {
    id: 4,
    title: 'Breast Pump',
    description: 'Efficient, comfortable pumps for nursing mothers',
    image: 'https://images.unsplash.com/photo-1632853073412-782bf0279d65?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    rating: 4.6
  }];
  return <section className="py-16 bg-wood/20 -mx-4 px-4 md:px-6 md:-mx-6 rounded-lg">
      <div className="text-center mb-12">
        <span className="inline-block px-3 py-1 bg-yellow/30 text-yellow-800 rounded-full text-sm font-medium mb-4">
          Must-Haves
        </span>
        <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-4">
          New Parent Essentials
        </h2>
        <p className="font-inter text-gray-600 max-w-2xl mx-auto">
          These top-rated products have been carefully selected to make your
          parenting journey easier and safer.
        </p>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
        {essentials.map(item => <a key={item.id} href="#" className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div className="aspect-square relative">
              <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
              <div className="absolute top-3 right-3 bg-white/90 rounded-full px-2 py-1 flex items-center">
                <StarIcon size={14} className="text-yellow fill-yellow" />
                <span className="ml-1 text-sm font-medium">{item.rating}</span>
              </div>
            </div>
            <div className="p-4">
              <h3 className="font-nunito font-semibold text-lg mb-1">
                {item.title}
              </h3>
              <p className="text-sm text-gray-600 mb-3">{item.description}</p>
              <span className="text-terracotta text-sm font-medium flex items-center">
                View Guide
                <ArrowRightIcon size={16} className="ml-1" />
              </span>
            </div>
          </a>)}
      </div>
      <div className="text-center">
        <a href="#" className="inline-flex items-center px-5 py-2.5 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors font-medium text-base">
          View Complete Checklist
          <ArrowRightIcon size={18} className="ml-2" />
        </a>
      </div>
    </section>;
};